<template>
	<div>

		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-tickets"></i> 菜单管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="handle-box">
			<el-button type="primary" icon="add" class="handle-add mr10" @click="addDialog()">添加</el-button>
			<el-button type="success" icon="update" class="handle-add mr10" @click="updateDialog()">修改</el-button>
			<el-button type="danger" icon="delete" class="handle-add mr10" @click="deleteDialog()">删除</el-button>
		</div>
		<el-table ref="multipleTable" :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border
		 highlight-current-row @current-change="handleCurrentChange" @selection-change="handleSelectionChange"
		 default-expand-all :tree-props="{children: 'child', hasChildren: 'hasChildren'}">
			<el-table-column type="selection" width="45">
			</el-table-column>
			<el-table-column prop="name" label="菜单名称" sortable width="180">
			</el-table-column>
			<el-table-column label="图标" sortable prop="icon" width="180">
				<template slot-scope="scope">
					<i :class="scope.row.icon" />
				</template>
			</el-table-column>
			<el-table-column prop="type" label="类型">
				<template slot-scope="scope">
					<el-tag :type="scope.row.type == 1 ? '': scope.row.type == 2 ? 'success' : 'warning'" disable-transitions>{{scope.row.type == 1 ? '目录': scope.row.type == 2 ? '菜单' : '按钮' }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="url" label="url">
			</el-table-column>
		</el-table>

		<!-- 新增弹出框 -->
		<el-dialog title="新增菜单" :visible.sync="addVisible" width="80%">
			<el-form ref="form" :model="form" label-width="100px">

				<el-form-item label="菜单名称">
					<el-input v-model="form.name"></el-input>
				</el-form-item>

				<el-form-item label="图标">
					<el-input v-model="form.icon"></el-input>
				</el-form-item>

				<el-form-item label="url">
					<el-input v-model="form.url"></el-input>
				</el-form-item>
				<el-form-item label="菜单类型">
					<el-select v-model="form.type" placeholder="请选择类型">
						<el-option label="目录" value="1"></el-option>
						<el-option label="菜单" value="2"></el-option>
						<el-option label="按钮" value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="所属菜单">
					<el-tag>{{form.parentName}}</el-tag>
				</el-form-item>

				<el-button type="primary" @click="add()">新增</el-button>
				<el-button @click="addVisible = false">取 消</el-button>
			</el-form>
		</el-dialog>


		<!-- 修改弹出框 -->
		<el-dialog title="修改弹出框" :visible.sync="editVisible" width="80%">
			<el-form ref="form" :model="form" label-width="100px">

				<el-form-item label="菜单名称">
					<el-input v-model="form.name"></el-input>
				</el-form-item>

				<el-form-item label="图标">
					<el-input v-model="form.icon"></el-input>
				</el-form-item>

				<el-form-item label="url">
					<el-input v-model="form.url"></el-input>
				</el-form-item>


				<el-form-item label="菜单类型">
					<el-select v-model="form.type" placeholder="请选择类型">
						<el-option label="目录" value="1" key="1"></el-option>
						<el-option label="菜单" value="2" key="2"></el-option>
						<el-option label="按钮" value="3" key="3"></el-option>
					</el-select>
				</el-form-item>


				<el-form-item label="所属菜单">
					<el-tag>{{form.parentName}}</el-tag>
				</el-form-item>

				<el-button type="primary" @click="update()">修改</el-button>
				<el-button @click="editVisible = false">取 消</el-button>
			</el-form>

		</el-dialog>

		<!-- 删除提示框 -->
		<el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
			<div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="delVisible = false">取 消</el-button>
				<el-button type="primary" @click="deleteRow">确 定</el-button>
			</span>
		</el-dialog>
	</div>

</template>
<script>
	export default {
		data() {
			return {
				tableData: [],
				checkList: [],
				addVisible: false,
				editVisible: false,
				delVisible: false,
				form: {
					name: '',
					icon: '',
					url: '',
					type: '',
					parentId: null,
					parentName: '',
				}
			}
		},
		created() {
			this.getData();
		},
		methods: {
			setCurrent(row) {
				this.$refs.singleTable.setCurrentRow(row);
			},
			handleCurrentChange(val) {

				this.currentRow = val;
			},
			/**
			 *设置选中
			 */
			toggleSelection(rows) {
				var that = this;
				if (rows) {
					rows.forEach(row => {
						var tempRow = that.getChildNodeByKey(that.tableData, row.id);
						if (row.list != null && row.list != undefined && row.list.length != undefined && row.list.length != 0) {
							that.toggleSelection(row.list);

							if (tempRow != undefined && tempRow.list != undefined && tempRow.list.length != undefined && tempRow.list.length ==
								row.list.length) {
								this.$refs.multipleTable.toggleRowSelection(row);
							}
						} else {
							this.$refs.multipleTable.toggleRowSelection(row);
						}

					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			toggleSelect() {
				this.toggleSelection(this.tableData);
			},
			/**
			 * checkbox 的选中方法
			 */
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			/**
			 * 获取所有子集
			 */
			getChilds(list) {
				var that = this;
				for (var i in list) {
					if (list[i].list != null) {
						that.getChilds(list[i].list);
					} else {
						if (list[i].id != '') {

							that.checkList.push(list[i]);
						}

					}

				}
				return list;
			},
			/**
			 * 根据key 和value 查询是否存在
			 */
			getChildByKey(list, key, value) {
				var res = false;
				var that = this;
				for (var i in list) {
					if (list[i].key == value) {
						res = true;
						break;
					}
				}
				return res;
			},
			/**
			 * 获取子节点根据key 和value 
			 */
			getChildNodeByKey(list, value) {
				var res;
				var that = this;
				for (var i in list) {
					if (list[i].list != null && list[i].list != undefined && list[i].list.length != 0) {
						res = this.getChildNodeByKey(list[i].list, value);

					}
					if (res != undefined) {
						break;
					}
					if (list[i].id == value) {
						res = list[i];
						break;
					}
				}
				return res;
			},

			// load(tree, treeNode, resolve) {
			//   setTimeout(() => {
			//     resolve([
			//       {
			//         id: 31,
			//         date: '2016-05-01',
			//         name: '王小虎',
			//         address: '上海市普陀区金沙江路 1519 弄'
			//       }, {
			//         id: 32,
			//         date: '2016-05-01',
			//         name: '王小虎',
			//         address: '上海市普陀区金沙江路 1519 弄'
			//       }
			//     ])
			//   }, 1000)
			// },
			getData() {
				var that = this;
				this.HttpUtil.encryptGet(
					this,
					this.Global.URLPATH.MENU_QUERY_ALL, {
						roleId: 1
					},
					function(data) {

						that.tableData = data.data.menuList;



					},
					function(data) { //访问失败
						//that.$message.success(data.msg);
					});
			},
			addDialog() {
				this.form.id = null;
				this.form.name = '';
				this.form.icon = '';
				this.form.url = '';
				this.form.type = null;
				this.form.parentId = null;
				this.form.parentName = '无';
				if (this.currentRow == undefined) {
					// this.$message.error("请选择行数后操作");
					// return
				} else {
					this.form.parentName = this.currentRow.name;
					this.form.parentId = this.currentRow.id;
				}
				this.addVisible = true;
			},
			add() {
				if (this.form.name == '' || this.form.type == null) {
					this.$message.error("请输入菜单名称");
					return
				}
				if (this.form.type == undefined || this.form.type == null) {
					this.$message.error("请选择类型");
					return
				}

				var that = this;
				this.HttpUtil.encryptPost(
					this,
					this.Global.URLPATH.MENU,
					this.form,
					function(data) {
						that.getData();
						that.addVisible = false;
					},
					function(data) { //访问失败
						//that.$message.success(data.msg);
					});
			},
			updateDialog() {

				if (this.currentRow == undefined) {
					this.$message.error("请选择行数后操作");
					return
				} else {
					this.form.id = this.currentRow.id;
					this.form.name = this.currentRow.name;
					this.form.icon = this.currentRow.icon;
					this.form.url = this.currentRow.url;
					this.form.type = this.currentRow.type;
					this.form.parentName = this.currentRow.parentName;
					this.form.parentId = this.currentRow.parentId;
					var res = this.getChildNodeByKey(this.tableData, this.currentRow.parentId);
					if (res != undefined) {
						this.form.parentName = res.name;
					} else {

					}
				}
				this.editVisible = true;
			},
			update() {
				if (this.form.name == '' || this.form.type == null) {
					this.$message.error("请输入菜单名称");
					return
				}
				if (this.form.type == undefined || this.form.type == null) {
					this.$message.error("请选择类型");
					return
				}

				var that = this;
				this.HttpUtil.encryptPut(
					this,
					this.Global.URLPATH.MENU + "/" + this.form.id,
					this.form,
					function(data) {
						that.getData();
						that.editVisible = false;
					},
					function(data) { //访问失败
						//that.$message.success(data.msg);
					});
			},
			deleteDialog() {

				if (this.currentRow.list != undefined && this.currentRow.list != null && this.currentRow.list.length > 0) {
					this.$message.error("请先删除子节点");
					return
				}
				this.form.id = this.currentRow.id;
				this.delVisible = true;
			},
			deleteRow() {
				var that = this;
				this.HttpUtil.encryptDelete(
					this,
					this.Global.URLPATH.MENU + "/" + this.form.id, {
						id: this.form.id
					},
					function(data) {
						that.getData();
						that.delVisible = false;
					},
					function(data) { //访问失败
						//that.$message.success(data.msg);
					});
			}
		},
		watch: {
			$route(newValue, oldValue) {
				if (newValue.path == "/role/menu") {
					this.getData();
				}
			}
		}
	}
</script>

<style>
	.handle-box {
		margin-bottom: 10px;
	}
</style>
